<%@page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<%--request.getSchema()可以返回当前页面使用的协议，http 或是 https;
request.getServerName() 就是localhost或127.0.0.1
request.getServerPort() 端口号
getContextPath   可返回站点的根路径。也就是项目的名字
“总结下来就是，"http://127.0.0.1:8080/crm/"”
--%>
<html>
<head>
    <base href="<%=basePath%>"/>
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet"/>
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
</head>
<script>
    $(function () {
        //给登录按钮实现回车登录功能
        $(window).keydown(function (event) {
            //如果按的是回车键，则登录请求
            if (event.keyCode == 13) {
                //模拟一次点击事件
                $("#loginBtn").click();
            }
        })


        //给登录按钮添加点击事件
        $("#loginBtn").click(function () {
            //收集参数
            var loginAct = $.trim($("#loginAct").val());
            var loginPwd = $.trim($('#loginPwd').val());
            var isRemPwd = $("#isRemPwd").prop("checked");
            /* //做一个表单验证
             if (loginAct == "") {
                 alert("请输入账户");
                 return;
             }
             if (loginPwd == "") {
                 alert("请输入密码");
                 return;
             }*/
            $.ajax({
                url: "settings/qx/user/login",
                data: {
                    //向后端提交的数据
                    loginAct: loginAct,
                    loginPwd: loginPwd,
                    isRemPwd: isRemPwd
                },
                type: 'post',
                dataType: 'json',
                //success代表下载数据成功后执行的操作
                success: function (data) {
                    if (data.code == 1) {
                        //跳转到业务主页面通过controller
                        //这里就是浏览器页面中的地址栏，中的路径为xxx
                        window.location.href = "workebench/index";
                    } else {
                        //给出登录失败的提示信息
                        $("#msg").text(data.message);
                    }
                },
                beforeSend: function () {//这个beforeSend就是当ajax向后台发送请求之前，会自动执行本函数
                    //改函数的返回值能够决定ajax是否真正向后台发送请求:
                    //如果改函数返回true,则ajax会真正向后台发送请求,否则，如果该函数返回false,则ajax放弃向后台发送请求
                    /*就是说我们的表单验证可以拿到这里来使用*/
                    //做一个表单验证
                    if (loginAct == "") {
                        alert("请输入账户");
                        return false;
                    }
                    if (loginPwd == "") {
                        alert("请输入密码");
                        return false;
                    }

                    //同样我们还可以在这里给个登录中的提示信息
                    $("#msg").text("正在登录请稍后....");
                    return true;
                }
            });
        });
    });


</script>

<body>
<div style="position: absolute; top: 0px; left: 0px; width: 60%;">
    <img src="image/IMG_7114.JPG" style="width: 100%; height: 90%; position: relative; top: 50px;">
</div>
<div id="top" style="height: 50px; background-color: #3C3C3C; width: 100%;">
    <div style="position: absolute; top: 5px; left: 0px; font-size: 30px; font-weight: 400; color: white; font-family: 'times new roman'">
        CRM &nbsp;<span style="font-size: 12px;">&copy;2019&nbsp;动力节点</span></div>
</div>

<div style="position: absolute; top: 120px; right: 100px;width:450px;height:400px;border:1px solid #D5D5D5">
    <div style="position: absolute; top: 0px; right: 60px;">
        <div class="page-header">
            <h1>登录</h1>
        </div>
        <form class="form-horizontal" role="form">
            <div class="form-group form-group-lg">
                <div style="width: 350px;">
                    <input class="form-control" id="loginAct" type="text" value="${cookie.loginAct.value}"
                           placeholder="用户名">
                </div>
                <div style="width: 350px; position: relative;top: 20px;">
                    <input class="form-control" id="loginPwd" type="password" value="${cookie.loginPwd.value}"
                           placeholder="密码">
                </div>
                <div class="checkbox" style="position: relative;top: 30px; left: 10px;">
                    <label>
                        <c:if test="${not empty cookie.loginAct}">
                            <input type="checkbox" id="isRemPwd" checked>
                        </c:if>
                        <c:if test="${empty cookie.loginAct}">
                            <input type="checkbox" id="isRemPwd" >
                        </c:if>
                        十天内免登录
                    </label>
                    &nbsp;&nbsp;
                    <span id="msg" style="color: red"></span>
                </div>
                <button type="button" id="loginBtn" class="btn btn-primary btn-lg btn-block"
                        style="width: 350px; position: relative;top: 45px;">登录
                </button>
            </div>
        </form>
    </div>
</div>
</body>
</html>